<script setup>
import ip from '@/utils/baseURL.js';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';


const router = useRouter();

// 登录表单数据
const loginForm = ref({
    account: '',
    password: '',
    checkCodeKey: '', // 验证码的唯一标识
    checkCode: '', // 用户输入的验证码
});

// 验证码图片
const captchaImage = ref('');

// 加载状态
const loading = ref(false);

// 表单验证规则
const rules = {
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};

// 获取验证码
const refreshCaptcha = async () => {
    try {
        const response = await fetch(ip + '/inter/login/verifyCode', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
        });
        const data = await response.json();
        if (data.code === 200) {
            captchaImage.value = data.data.image; // 显示验证码图片
            loginForm.value.checkCodeKey = data.data.key; // 保存验证码的唯一标识
        } else {
            ElMessage.error('获取验证码失败');
        }
    } catch (error) {
        console.error('Error:', error);
        ElMessage.error('网络错误，请稍后重试');
    }
};

// 提交登录表单
const submitForm = async () => {
    loading.value = true;
    try {
        // 调用登录接口
        const response = await fetch(ip + '/inter/login/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(loginForm.value), // 提交登录表单数据
        });
        const data = await response.json();

        // 处理返回结果
        if (data.code === 200) {
            ElMessage.success('登录成功');
            // 保存 session 到本地存储
            localStorage.setItem('session', data.data.session);
            
            // 跳转到用户原本试图访问的页面，或默认页面
            const redirectPath = router.currentRoute.value.query.redirect || '/admin/index';
            router.push(redirectPath);
        } else {
            ElMessage.error(data.message || '登录失败');
        }
    } catch (error) {
        console.error('Error:', error);
        ElMessage.error('网络错误，请稍后重试');
    } finally {
        loading.value = false;
    }
};

// 页面加载时获取验证码
onMounted(() => {
    refreshCaptcha();
});
</script>

<template>
    <div class="login-container">
        <div class="login-content">
            <div class="left-panel">
                <div class="welcome-text">
                    <h1>智慧农业创新实验室</h1>
                    <p>科技创新，智慧农业</p>
                </div>
            </div>
            <div class="right-panel">
                <el-card class="login-box">
                    <div class="login-header">
                        <h2>管理员登录</h2>
                        <div class="divider"></div>
                    </div>
                    <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                        <el-form-item prop="account">
                            <el-input
                                v-model="loginForm.account"
                                placeholder="请输入账号"
                                prefix-icon="User"
                                class="custom-input"
                            />
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input
                                v-model="loginForm.password"
                                type="password"
                                placeholder="请输入密码"
                                prefix-icon="Lock"
                                show-password
                                class="custom-input"
                            />
                        </el-form-item>

                        <el-form-item prop="checkCode">
                            <div class="captcha-input">
                                <el-input
                                    v-model="loginForm.checkCode"
                                    placeholder="请输入验证码"
                                    prefix-icon="Picture"
                                    class="custom-input"
                                />
                                <img
                                    :src="captchaImage"
                                    alt="验证码"
                                    class="captcha-image"
                                    @click="refreshCaptcha"
                                />
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="submitForm"
                                :loading="loading"
                                class="login-button"
                            >
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-content {
    display: flex;
    width: 1000px;
    height: 600px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.left-panel {
    flex: 1;
    background: linear-gradient(45deg, rgba(134, 185, 67, 0.95), rgba(74, 156, 93, 0.95));
                //url('@/assets/banner-bg.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.1)' fill-rule='evenodd'/%3E%3C/svg%3E");
        opacity: 0.2;
        animation: moveBackground 30s linear infinite;
    }

    .welcome-text {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;

        h1 {
            font-size: 36px;
            margin-bottom: 20px;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        p {
            font-size: 18px;
            opacity: 0.9;
        }
    }
}

.right-panel {
    width: 450px;
    padding: 40px;
    display: flex;
    align-items: center;
}

.login-box {
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;

    .login-header {
        margin-bottom: 40px;
        text-align: center;

        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }

        .divider {
            width: 50px;
            height: 4px;
            background: #86B943;
            margin: 0 auto;
            border-radius: 2px;
        }
    }
}

.custom-input {
    :deep(.el-input__wrapper) {
        background: #f8f9fa;
        border: 2px solid transparent;
        border-radius: 10px;
        transition: all 0.3s ease;
        
        &:hover {
            background: #fff;
            border-color: #e6e8eb;
        }
        
        &.is-focus {
            background: #fff;
            border-color: #86B943;
            box-shadow: 0 0 0 2px rgba(134, 185, 67, 0.1);
        }
    }

    :deep(.el-input__inner) {
        height: 44px;
    }
}

.captcha-input {
    display: flex;
    gap: 12px;

    .captcha-image {
        height: 44px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
    }
}

.login-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 10px;
    background: #86B943;
    border: none;
    transition: all 0.3s ease;
    
    &:hover {
        background: #78a83c;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(134, 185, 67, 0.2);
    }
    
    &:active {
        transform: translateY(0);
    }
}

@keyframes moveBackground {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-50%, -50%);
    }
}

// 响应式适配
@media (max-width: 1024px) {
    .login-content {
        width: 90%;
        height: auto;
        flex-direction: column;
    }

    .left-panel {
        padding: 60px 20px;
    }

    .right-panel {
        width: 100%;
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .login-content {
        width: 100%;
        border-radius: 0;
    }

    .left-panel {
        padding: 40px 20px;
    }
}
</style>